<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>花瓣网</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            vertical-align: top;
        }
        html,body{
            width: 100%;
            height: 100%;
        }
        .page{
            width: 100%;
            height: auto;
            padding-top: 48px;
        }
        /*头部样式*/
        .header{
            width: 100%;
            height: 48px;
            background-color: #FFFFFF;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .header .header-in{
            height: 100%;
            width: 1400px;
            margin: 0 auto;
            /*background: #3dbaf0;*/
        }
        .header-in .header-left{
            width: 435px;
            height: 28px;
            float: left;
            margin-top: 10px;
        }
        .header-left li{
            float: left;
            margin-right: 20px;
        }
        .header-left li a{
            line-height: 28px;
            text-align: center;
            display: inline-block;
            color: #444444;
            font-size: 14px;
        }
        .header-left li a:hover{
            color: #c90000;
        }
        .header-left li:last-child a{
            font-size: 40px;
            line-height: 2px;
        }
        .new {
            width: 30px;
            height: 14px;
            background: #f4a523;
            display: inline-block;
            line-height: 14px;
            margin-top: 6px;
            margin-left: 2px;
            color: #FFFFFF;
            padding: 2px;
        }
        .logo-pic{
            width: 80px;
            height: 28px;
            display: inline-block;
            background: url("images/huaban_logo.png");
            background-size: cover;
        }

        .header .header-in .header-center{
            width: 675px;
            height: 34px;
            margin-top: 7px;
            float: left;
        }
        .header .header-in .header-center input{
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            outline: none;
            background: #fafafa;
            border: 1px solid #ddd;
            font-size: 14px;
        }
        .header .header-in .header-right{
            width: 116px;
            height: 48px;
            float: left;
            /*background: #f4a523;*/
            margin-left: 50px;
        }
        .header .header-in .header-right a{
            float: left;
            width: 52px;
            height: 32px;
            line-height: 32px;
            display: inline;
            text-align: center;
            margin-top: 7px;
            color: #383838;
            border: 1px solid #d9d9d9;
        }
        .header .header-in .header-right a:nth-child(1){
            background: linear-gradient(#E53E49, #D43636);
            color: #fff;
            border:1px solid #c90000;
        }
        .header .header-in .header-right a:nth-child(1):hover{
            background-color: #E53E49;
        }
        .header .header-in .header-right a:nth-child(2){
            margin-left: 8px;
        }
        /*头部样式*/

        /*轮播广告样式*/
        .slider-banner{
            width: 100%;
            height: 60px;
            background: #f4a523;
        }
        .slider-banner ul{
            width: 100%;
            height: 60px;
            position: relative;
        }
        .slider-banner ul li{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
        }
        .slider-banner ul li a{
            display: inline-block;
            width: 100%;
            height: 100%;
        }
        .slider-banner ul li:nth-child(1) a{
            background: url("images/top_banner01.jpg") center center;
        }
        .slider-banner ul li:nth-child(2) a{
            background: url("images/top_banner02.jpg") center center;
        }
        .slider-banner ul li:nth-child(3) a{
            background: url("images/top_banner03.jpg") center center;
        }
        .slider-banner ul li:nth-child(4) a{
            background: url("images/top_banner04.jpg") center center;
        }
        .slider-banner ul li:nth-child(5) a{
            background: url("images/top_banner05.jpg") center center;
        }
        .slider-banner ul li:nth-child(6) a{
            background: url("images/top_banner06.jpg") center center;
        }
        .slider-banner ul li:nth-child(7) a{
            background: url("images/top_banner07.jpg") center center;
        }
        /*轮播广告样式*/
        /*快速登录样式*/
        .quick-login{
            width: 100%;
            height: 120px;
            background: url("images/login_header_blurbg.jpg");
        }
        .quick-login .quick-login-in{
            width: 1400px;
            height: 100%;
            /*background-color: red;*/
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            color: #FFFFFF;
            font-size: 18px;
        }
        .quick-login .quick-login-in .intro{
            /*background-color: blue;*/
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .quick-login .quick-login-in .intro .title{
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        .quick-login .quick-login-in .login_icon{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .quick-login .quick-login-in .login_icon li{
            float: left;
            margin-right: 15px;
            margin-bottom: 5px;
        }
        .quick-login .quick-login-in .login_icon li a{
            width:54px;
            height: 54px;
            display: inline-block;
            border-radius: 50%;
        }
        .quick-login .quick-login-in .login_icon li:nth-child(1) a{
            background: url("images/icon.jpg") 0 0;
        }
        .quick-login .quick-login-in .login_icon li:nth-child(2) a{
            background: url("images/icon.jpg") 60px 0;
        }
        .quick-login .quick-login-in .login_icon li:nth-child(3) a{
            background: url("images/icon.jpg") 140px 0;
        }
        .quick-login .quick-login-in .login_icon li:nth-child(4) a{
            background: url("images/icon.jpg") 220px 0;
        }
        /*快速登录样式*/
        /*吸顶样式*/
        .top-nav{
            width: 100%;
            height: 70px;
            position: fixed;
            left: 0;
            top:48px;
            background-color: rgba(0, 0, 0, .5);
            z-index: 999;
            display: none;
        }
        .top-nav .top-nav-in{
            width: 1400px;
            height: 100%;
            /*background: red;*/
            margin: 0 auto;
        }
        .top-nav .top-nav-in>div{
            width: 375px;
            height: 100%;
            color: #fff;
        }
        .top-nav .top-nav-in .left{
            float: left;
        }
        .top-nav .top-nav-in .right{
            float: right;
            padding-top: 15px;
            box-sizing: border-box;
        }
        .top-nav .top-nav-in .left p:nth-child(1){
            font-size: 24px;
            font-weight: 700;
            margin-top: 10px;
        }
        .top-nav .top-nav-in .right li{
            width: 42px;
            height: 42px;
            float: left;
            margin-left: 8px;
        }
        .top-nav .top-nav-in .right li:nth-child(1){
            width: 150px;
            font-size: 14px;
            line-height: 42px;
        }
        .top-nav .top-nav-in .right li:nth-child(2) a{
             width: 42px;
             height: 42px;
             display: inline-block;
             background: url("images/icon2.png");
             background-size:cover;
         }
        .top-nav .top-nav-in .right li:nth-child(3) a{
            width: 42px;
            height: 42px;
            display: inline-block;
            background: url("images/icon2.png") -42px 0;
            background-size:cover;
        }
        .top-nav .top-nav-in .right li:nth-child(4) a{
            width: 42px;
            height: 42px;
            display: inline-block;
            background: url("images/icon2.png") -84px 0;
            background-size:cover;
        }
        .top-nav .top-nav-in .right li:nth-child(5) a{
            width: 42px;
            height: 42px;
            display: inline-block;
            background: url("images/icon2.png") -126px 0;
            background-size:cover;
        }
        /*吸顶样式*/

        /*类型标题样式*/
        .type-title{
            width: 100%;
            height: 130px;
            /*background: red;*/
        }
        .type-title .type-title-in{
            width: 230px;
            height: 100%;
            /*background: #3dbaf0;*/
            position: relative;
            margin: 0 auto;
            text-align: center;
            line-height: 130px;
            font-size: 30px;
            color: #666666;
        }
        .type-title .type-title-in .line-left{
            width: 48px;
            border-top:1px solid #666;
            position: absolute;
            top:65px;
            left: 15px;
        }
        .type-title .type-title-in .line-right{
            width: 48px;
            border-top:1px solid #666;
            position: absolute;
            top:65px;
            right: 15px;
        }
        /*类型标题样式*/

        /*tab选项卡样式*/
        .tab{
            width: 100%;
            height: auto;
        }
        .tab .tab-header{
            height: 48px;
            width: 300px;
            margin: 0 auto;
            /*background: #3dbaf0;*/
            cursor: pointer;
        }
        .tab .tab-header ul li{
            width: 100px;
            float: left;
            text-align: center;
            line-height: 47px;

        }
        .tab .tab-header ul li.current{
            border-bottom: 1px solid orangered;
            color: orangered;
        }
        .tab .tab-content{
            width: 100%;
            background-color: #e8e8e8;
        }
        .tab .tab-content .dom:nth-child(1){
            width: 100%;
            /*background-color: red;*/
        }
        .tab .tab-content .dom:nth-child(2){
            width: 100%;
            background-color: yellow;
        }
        .tab .tab-content .dom:nth-child(3){
            width: 100%;
            background-color: green;
        }
        .tab .tab-content .dom{
            display: none;
        }
        /*tab选项卡样式*/

        /*内容头部样式*/
        .dom_top{
            width: 1400px;
            height: 126px;
            margin: 0 auto;
            /*background: red;*/
            padding: 16px;
        }
        .dom_top li{
            width: 260px;
            height: 126px;
           /* background-color:#3dbaf0;*/
            float: left;
            margin-left: 16px;
        }
        .dom_top li a{
            width: 260px;
            height: 126px;
            display: inline-block;
        }
        .dom_top li:nth-child(1){
            margin-left: 0;
        }
        .dom_top li:nth-child(1) a{
             background: url("images/top01.png");
             background-size: cover;
         }
        .dom_top li:nth-child(2) a{
            background: url("images/top02.jpg");
            background-size: cover;
        }
        .dom_top li:nth-child(3) a{
             background: url("images/top03.jpg");
             background-size: cover;
         }
        .dom_top li:nth-child(4) a{
            background: url("images/top04.jpg");
            background-size: cover;
        }
        .dom_top li:nth-child(5) a{
            background: url("images/top05.jpg");
            background-size: cover;
        }
        /*内容头部样式*/
        /*瀑布流样式*/
        .dom-pull{
            width: 1400px;
            margin: 0 auto;
            /*padding: 20px 0;*/
            position: relative;
            height: auto;
            /*background-color: red;*/
            /*overflow: hidden;*/
        }
        .dom-pull .box{
            width: 260px;
            float: left;
            position: relative;
            border: 1px solid #ccc;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            /*display: none;*/
        }
        .dom-pull .box .pic{
            cursor: pointer;
            position: relative;
        }
        .dom-pull .box .pic img{
            width: 260px;
        }
        .dom-pull p{
            line-height: 18px;
            padding: 0 10px;
            margin: 10px 0;
            font-size: 12px;
        }
        .dom-pull .box .pic .cover{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(255, 255, 255, 0.2);
            display: none;
        }
        .dom-pull .box .btn-box{
            position: absolute;
            top: 6px;
            left: 6px;
            right: 6px;
            background-color: red;
            z-index: 3;
            display: none;
        }
        .dom-pull .box .btn-box .collect{
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            background-color: #E53E49;
            line-height: 30px;
            padding: 0 12px;
            color: #FFFFFF;
            font-size: 12px;
            /*display: none;*/
        }
        .dom-pull .box .btn-box .like{
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border-radius: 5px;

            display: flex;
            justify-content: center;
            align-items: center;
            /*display: none;*/
        }
        .dom-pull .box .btn-box .like .heart{
            width: 14px;
            height: 14px;
            background: url("images/action_icons12.png")  -20px 0;
            display: inline-block;
        }
        /*瀑布流样式*/

        /*右下角的布局*/
        .elevator-item{
            position: fixed;
            right: 15px;
            bottom: 10px;
            z-index: 1000;
            opacity: 1;
        }
        .elevator-item .elevator{
            width: 40px;
            height: 36px;
            display: inline-block;
            background: url("images/iconsprite_btbar.png") 8px 6px no-repeat;
            background-color: rgba(0, 0, 0, .6);
            border-radius: 4px;
            margin-bottom: 5px;
        }
        .elevator-item .elevator:hover{
            background-color: rgba(0, 0, 0, .8);
        }
        .elevator-item .plus{
            width: 40px;
            height: 36px;
            display: inline-block;
            background: url("images/iconsprite_btbar.png") 8px -34px no-repeat;
            background-color: rgba(0, 0, 0, .6);
            border-radius: 4px;
        }
        .elevator-item .plus:hover{
            background-color: rgba(0, 0, 0, .8);
        }

        /*右下角的布局*/

        /*登录面板*/
        .mask{
            position: fixed;
            top: 0;
            left: 0;

            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.5);
            z-index: 999;
            display: none;
        }
        .mask .mask-center{
            width: 520px;
            height: 420px;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -160px;
            margin-left: -260px;
            border-radius: 5px;
            padding: 25px;
            box-sizing: border-box;
        }
        .mask .mask-center .logo-img{
            display: block;
            width: 106px;
            margin: 0 auto;
        }
        .mask .mask-center .close-btn{
            position: absolute;
            top: 10px;
            right: 10px;
            /*background-color: red;*/
            display: inline-block;
            width: 18px;
            height: 18px;
            background: url("images/msg_close.png") 0 0;
        }
        .mask .mask-center .center_box{
            width:286px ;
            margin: 20px auto 0;
        }
        .mask .mask-center .center_box .txtBox{
            position: relative;
            margin: 0 auto;
            /*background: red;*/
            text-align: center;
            color: #999;
        }
        .mask .mask-center .center_box .txtBox span:nth-child(1){
            border-top: 1px solid #999;
            position: absolute;
            display: block;
            width: 50px;
            top: 8px;
            left: 0;
        }
        .mask .mask-center .center_box .txtBox span:nth-child(3){
            border-top: 1px solid #999;
            position: absolute;
            display: block;
            width: 50px;
            top: 8px;
            right: 0;
        }
        .mask .mask-center .center_box .buttons{
            text-align: center;
            margin: 15px 0 20px;
        }
        .mask .mask-center .center_box .buttons a{
            display: inline-block;
            width: 48px;
            height: 48px;
            background: url("images/login_icons_tiny.svg") ;
        }
        .mask .mask-center .center_box .buttons a:nth-child(2){
            background-position: -80px 0;
        }
        .mask .mask-center .center_box .buttons a:nth-child(3){
            background-position: -160px 0;
        }
        .mask .mask-center .center_box .buttons a:nth-child(4){
            background-position: -240px 0;
        }
        .mask .mask-center .center_box .buttons a:nth-child(5){
            background-position: -320px 0;
            margin-right: 0;
        }
        .mask .mask-center .center_box .mail-login{
            margin-top: 15px;
        }
        .mask .mask-center .center_box .mail-login .clear-input{
            margin-bottom: 10px;
            width: 100%;
            box-sizing: border-box;
            display: inline-block;
            height: 36px;
            padding: 0 10px;
            color: #777;
            background: #FCFCFC;
            border: 1px solid #CCC;
            border-radius: 3px;
            outline: none;
        }
        .btn18 {
            font-size: 18px;
            /*padding: 0 15px;*/
            border-radius: 3px;
            height: 36px;
            line-height: 36px;
            width: 100%;
        }
        .rbtn{
            display: inline-block;
            background: #E53E49;
            color: #FFFFFF;

            text-align: center;
            background: linear-gradient( #E53E49, #D43636);
            box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 0 rgba(255,255,255,.3);
            text-shadow: 0 -1px 0 rgba(0,0,0,.1);

            border: 1px solid #C90000;

        }
        .switch-back {
            text-align: center;
            margin: 10px 0;
        }

        .red-link {
            color: #9A0000;
        }
        .center_box a {
            cursor: pointer;
        }
        /*登录面板*/
    </style>

</head>
<body>
<div id="page" class="page">
    <!--头部-->
    <header id="header" class="header">
        <div id="header_in" class="header-in">
            <div id="header_left" class="header-left">
                <ul>
                    <li class="logo-pic"><h1><a href=""></a></h1></li>
                    <li><a href="">发现</a></li>
                    <li><a href="">最新</a></li>
                    <li><a href="">美思</a></li>
                    <li><a href="">活动<span class="new">new</span></a></li>
                    <li><a href="">教育</a></li>
                    <li><a href="">...</a></li>
                </ul>
            </div>
            <div id="header_center" class="header-center">
                <input id="query" name="query" type="text" placeholder="搜索你喜欢的" value="">
            </div>
            <div id="header_right" class="header-right">
                <a href="#" id="register" class="register">
                    <span class="text">注册</span>
                </a>
                <a href="#" id="login" class="login">
                    <span class="text">登录</span>
                </a>
            </div>
        </div>
    </header>
    <!--广告切换-->
    <section id="slider_banner" class="slider-banner">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </section>
    <section id="quick_login" class="quick-login">
        <div class="quick-login-in">
            <div class="intro">
                <div class="title">国内最优质图片灵感库</div>
                <div>已有数百万出众网友，用花瓣保存喜欢的图片。</div>
            </div>
            <div class="login_icon">
                <ul>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                    <li><a href=""><span></span></a></li>
                </ul>
                <div class="tip_text">
                    <span class="line_left"></span>
                    <span class="text">用以上社交帐号直接登录</span>
                    <span class="line-right"></span>
                </div>
            </div>
        </div>
    </section>
    <!--吸顶效果-->
    <section id="top_nav" class="top-nav">
        <div class="top-nav-in">
            <div class="left">
                <p>国内最优质图片灵感库</p>
                <p>已有数百万出众网友，用花瓣保存喜欢的图片。</p>
            </div>
            <div class="right">
                <ul>
                    <li><p>用社交帐号直接登录：</p></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </div>
        </div>
    </section>
    <!--标题-->
    <section id="type_title"  class="type-title">
        <div class="type-title-in">
            <span class="line-left"></span>
            <span>美图</span>
            <span class="line-right"></span>
        </div>
    </section>
    <!--tab选项卡-->
    <div id="tab" class="tab">
        <div id="tab_header" class="tab-header">
            <ul>
                <li class="current">采集</li>
                <li>推荐画板</li>
                <li>推荐用户</li>
            </ul>
        </div>
        <div id="tab_content" class="tab-content">
            <div class="dom" style="display: block">
                <div class="dom_top">
                    <ul>
                        <li><a href="" title="花瓣，陪你做生活的设计师"></a></li>
                        <li><a href="" title="句子的温度"></a></li>
                        <li><a href="" title="每天送自己一句话"></a></li>
                        <li><a href="" title="孤独患者"></a></li>
                        <li><a href="" title="笔尖的思绪"></a></li>
                    </ul>
                </div>
                <div class="dom-pull" id="dom_pull">

                </div>
            </div>

            <div class="dom">第二个</div>
            <div class="dom">第三个</div>
        </div>
    </div>
</div>
<!--右边浮动-->
<div id="elevator_item" class="elevator-item">
    <a href="#" class="elevator" id="elevator" title="回到顶部"></a><br/>
    <a href="#" class="plus"></a>
</div>
<!--登录面板-->
<section id="mask" class="mask">
    <div class="mask-center" id="mask_center">
        <!--关闭-->
        <a href="#" class="close-btn" id="close_btn"></a>
        <!--logo-->
        <img class="logo-img" src="images/logo_2x.png" alt="">
        <!--内容-->
        <div class="center_box">
            <!--第三方帐号登录-->
            <div class="txtBox">
                <span></span>
                <span class="txt">使用第三方帐号登录</span>
                <span></span>
            </div>
            <!--按钮图片-->
            <div class="buttons">
                <a href="#" title="微博帐号登录" rel="nofollow" class="weibo"></a>
                <a href="#" title="QQ帐号登录" rel="nofollow" class="qzone"></a>
                <a href="#" title="微信帐号登录" rel="nofollow" class="wechat"></a>
                <a href="#" title="豆瓣帐号登录" rel="nofollow" class="douban"></a>
                <a href="#" title="人人帐号登录" rel="nofollow" class="renren"></a>
            </div>
            <div class="txtBox">
                <span></span>
                <span class="txt">使用手机号/邮箱登录</span>
                <span></span>
            </div>
            <!--表单-->
            <form action="" method="post" class="mail-login">
                <input type="hidden" name="_ref" value="frame">
                <input type="text" name="email" placeholder="输入手机号或者邮箱" class="clear-input"><br/>
                <input name="password" type="password" placeholder="密码" class="clear-input"><br/>
                <a href="#" onclick="return false;" class="btn btn18 rbtn">
                        <span class="text"> 登录
                        </span>
                </a>
            </form>
            <div class="switch-back">
                <a class="red-link">忘记密码»</a>
                还没有花瓣帐号？
                <a class="red-link">点击注册»</a>
            </div>
        </div>
    </div>
</section>
</body>
<script src="js/MyFunc.js"></script>
<script src="js/Underscore-min.js"></script>
<script src="js/waterFull.js"></script>
<script>
    (function (window) {
        tab();
        autoCreateImg();
        setTimeout(function () {
            waterFull("dom_pull", "box");
        },200);
        window.onscroll = function () {
            if(checkWillLoadImage()){
                autoCreateImg();
                waterFull("dom_pull", "box");
            }

            var scrollTop =scroll().top;

            if(scrollTop>150){
                document.getElementById("top_nav").style.display="block";
                document.getElementById("elevator").style.display="block";
            }else{
                document.getElementById("top_nav").style.display="none";
                document.getElementById("elevator").style.display="none";
            }
            document.getElementById("elevator").onclick = function () {
                buffer(document.documentElement, {scrollTop: 0}, null);
            }
        }
        var login = document.getElementById("login");
        login.onclick = function () {
            document.getElementById("mask").style.display="block";
        }
        var close = document.getElementById("close_btn");
        close.onclick = function () {
            document.getElementById("mask").style.display="none";
        }
        bannerAutoPlay();

    })(window);
    function bannerAutoPlay() {
        var bannerLi = document.getElementById("slider_banner").getElementsByTagName("li");

        var index = 0;
        setInterval(function () {
            for(var i= 0;i<bannerLi.length;i++){
                var li = bannerLi[i];
                buffer(li,{opacity: 0}, null);
            }
            buffer(bannerLi[index],{opacity: 1}, null);
            index++;
            if(index === bannerLi.length){
                index = 0;
            }
        },2000);

    }
    function tab() {
        var HeadLis = document.getElementById("tab_header").getElementsByTagName("li");
        var ContentLis = document.getElementById("tab_content").getElementsByClassName("dom");
        var lastOne = 0;
        for(var i=0;i<HeadLis.length;i++){
            var li =HeadLis[i];
            (function (i) {
                li.onmousedown=function () {
                    HeadLis[lastOne].className = "";
                    ContentLis[lastOne].style.display="none";

                    this.className = "current";
                    ContentLis[i].style.display="block";
                    lastOne = i;
                };
            })(i)
        }
    }
    function autoCreateImg() {
        var json = [
            {txt: '当我们正在为生活疲于奔命的时候，生活已经离我们而去。——约翰·列侬', pic: 'images/0.jpg'},
            {txt: '活在世上，不必什么都知道，只知道最好的就够了。——王小波', pic: 'images/1.jpg'},
            {txt: '世界上任何书籍都不能带给你好运，但是它们能让你悄悄变成你自己。——黑塞', pic: 'images/2.jpg'},
            {txt: '很多人不需要再见，只是路过而已。——《彼岸花》', pic: 'images/3.jpg'},
            {txt: '人生最困难的三件事：保守秘密，忘掉所受的创伤，充分利用余暇。——吉罗', pic: 'images/4.jpg'},
            {txt: '有些人是离开后，才会发觉那个人是最喜欢的。——《东邪西毒》', pic: 'images/5.jpg'},
            {txt: '我总是在日暮时分,书影与书影之间,宁静的悲哀里,最想念你。——亦舒', pic: 'images/6.jpg'},
            {txt: '再长的路，一步步地能走完，再短的路，不迈开双脚也无法到达。', pic: 'images/7.jpg'},
            {txt: '哪里会有人喜欢孤独，不过是不喜欢失望。——村上春树', pic: 'images/8.jpg'},
            {txt: '人时已尽，人世很长，我在中间，应当休息。——顾城', pic: 'images/9.jpg'},
            {txt: '信任的深浅，不在于会不会对你笑，而在于愿不愿意在你面前哭。', pic: 'images/10.jpg'},
            {txt: '有一种旅行，不为跋涉千里的向往，只为漫无目的的闲逛，不为人山人海的名胜，只为怡然自乐的街景...', pic: 'images/11.jpg'},
            {txt: '人都会孤独，但唯独他，可以越过这尘世的热闹，一眼明白这世间所有的繁华不过是他身边的过眼云烟。', pic: 'images/12.jpg'},
            {txt: '不乱于心，不困于情。不畏将来，不念过往。如此，安好。', pic: 'images/13.jpg'},
            {txt: '每一个人都需要这样一个朋友：当以为自己再也笑不出来的时候，他能让你开怀大笑！', pic: 'images/14.jpg'},
            {txt: '咖啡苦与甜，不在于怎么搅拌，而在于是否放糖；一段伤痛，不在于怎么忘记，而在于是否有勇气重新开始。', pic: 'images/15.jpg'},
            {txt: '其实我不是一定要等你，只是等上了，就等不了别人了。——《朝露若颜》', pic: 'images/16.jpg'},
            {txt: '一切都是瞬间，一切都会过去，一切过去了的都会变成亲切的怀念。——普希金', pic: 'images/17.jpg'},
            {txt: '多少人曾爱慕你年轻时的容颜，可知谁愿承受岁月无情的变迁', pic: 'images/18.jpg'},
            {txt: '不在任何东西面前失去自我，哪怕是教条，哪怕是别人的目光，哪怕是爱情。——《成为简·奥斯汀》', pic: 'images/19.jpg'},
            {txt: '你如果认识从前的我，也许你会原谅现在的我。——张爱玲', pic: 'images/20.jpg'},
            {txt: '简约不是少，而是没有多余。足够也不是多，而是刚好你在。', pic: 'images/21.jpg'},
            {txt: '若只是喜欢 何必夸张成爱。——林夕', pic: 'images/22.jpg'},
            {txt: '梦里出现的人，醒来时就该去见她，生活就是这么简单。——《新桥恋人》', pic: 'images/23.jpg'},
            {txt: '与众不同的你是幸运的，何必让自己变得与别人一样。', pic: 'images/24.jpg'},
            {txt: '阳光温热，岁月静好，你还不来，我怎敢老。', pic: 'images/25.jpg'},
            {txt: '一个人知道自己为什么而活，就能忍受任何生活。——尼采', pic: 'images/26.jpg'},
            {txt: '我们已经出发了太久，以至于我们忘了为什么要出发。——纪伯伦', pic: 'images/27.jpg'},
            {txt: '水来，我在水中等你；火来，我在灰烬中等你。——《你是我的独家记忆》', pic: 'images/28.jpg'},
            {txt: '天下就没有偶然，那不过是化了妆的，戴了面具的必然。——钱钟书', pic: 'images/29.jpg'}
        ], str, txt, pic, htmlStr;
        for(var i = 0;i<30;i++){
            str = document.getElementById("dom_pull").innerHTML;
           /* console.log(str)*/
            txt = json[i].txt;
            pic = json[i].pic;
            htmlStr = "<div class=\"box\">" +
                "<div class=\"pic\">" +
                "<img src=\""+pic+"\">" +
                "<div class=\"cover\"></div>" +
                "</div>" +
                "<p>"+txt+"</p>" +
                "<div class=\"btn-box\">" +
                "<a href=\"\" class=\"collect\">采集</a>" +
                "<a href=\"\" class=\"like\">" +
                "<span class=\"heart\"></span>" +
                "</a>" +
                "</div>" +
                "</div>"
            str +=htmlStr;
            document.getElementById("dom_pull").innerHTML = str;
            var box = document.getElementById("dom_pull").getElementsByClassName("box");
            var box_pic = document.getElementById("dom_pull").getElementsByClassName("pic");
            /*console.log(box)*/
            for(var j=0;j<box.length;j++){
                //console.log(box[j]);
                box[j].onmouseover = function () {
                    this.childNodes[2].style.display = "block";
                }
                box[j].onmouseout = function () {
                    this.childNodes[2].style.display = "none";
                }
                box_pic[j].onmouseover = function () {
                    this.childNodes[1].style.display = "block";
                }
                box_pic[j].onmouseout = function () {
                    this.childNodes[1].style.display = "none";
                }
            }
        }
    }
</script>
</html>